<template>
	<view class="Allbox">
		<view class="itemAllbox">
			
			<view class="titleAllbox">
				<view class="gideindex">旅游指南</view>
				<view class="itemboxall">
					<view class="selfindex">去定制</view>
					<image class="itemIcon" src="../../../static/index/Icon _ Light _ Chevron _ Previous (1).png" mode=""></image>
				</view>
			</view>
			
			<view class="card">
				<view class="cardItemBox">
					<view class="headerBox">
						<view class="headerBoxItem">
							<view class="indexWordtitle">【推荐活动】</view>
							<view class="indexWordtitle">{{title}}</view>
						</view>
						<view class="cantact isword">
							{{cantact}}
						</view>
					</view>
					
					<view class="bodyBox">
						<view class="indexWordtitle">
							.基础权益
						</view>
						<view class="contactbody">
							<view class="cantact">建议在虎跳峡附近的餐厅用餐</view>
							<view class="cantact">建议在虎跳峡附近的餐厅用餐</view>
						</view>
					</view>
					
					<view class="lastBox">
						<view class="indexWordtitle">
							.复购权益
						</view>
						<view class="cantact isword">
							{{cantact}}
						</view>
					</view>
				</view>
			
			</view>
		</view>
	</view>
</template>

<script setup>
	const propos = defineProps({
		title:{
			type:String,
			default:'虎跳峡高炉徒步'
		},
		cantact:{
			type:String,
			default:'虎跳峡分为上虎跳、中虎跳和下虎跳三部分，每一段都有各自的特色。这里不仅适合观光旅游，还是一条非常受欢迎的徒步路线.'
		}
	})
</script>

<style scoped>
	.gideindex{
		font-size: 20px;
		font-family:  "仓耳渔阳体 W05";
	}
	.indexWordtitle{
		font-weight: 100;
	}
	.isword{
		margin-top: 1vh;
	}
	.lastBox{
		margin-bottom: 2vh;
		margin-top: 5vh;
	}
	.contactbody{
		margin-left: 5px;
		margin-top: 4vh;
	}
	.headerBoxItem{
		margin-top: 3vw;
		display: flex;
	}
	.cardItemBox{
		margin: 0 auto;
		width: 95%;
		 background-image: linear-gradient(45deg, #f5f5f5, rgb(255,226,201));
		border-radius:5px;
	}
	.bodyBox{
		margin-top: 5vh;
	}
	.cantact{
		
		line-height: 22px;
		display: flex;
		flex-wrap: wrap;
		width: 80vw;
		font-size: 13px;
		color: #A6A6A6;
	}
	.Allbox{
		margin-top: 5vw;
		width: 100vw;
		background-color: white;
	}
	.itemboxall{
		display: flex;
		align-items: center;
	}
	.card{
		margin-top: 1vh;
		width: 100%;
		 background-image: linear-gradient(45deg, #f5f5f5, rgb(255,226,201));
		border-radius:5px;
	}
	.selfindex{
		font-size: 14px;
		color:#737373 ;
	}
	.itemIcon{
		margin-left: 5px;
		width: 6px;
		height: 11px;
	}
	.itemAllbox{
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: 0 auto;
	}
	.titleAllbox{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
</style>